<template>
    <div>
        <div class="logo">
                <img src="../../../../public/logo.jpg" alt="">
                <h3>登录页面</h3>
        </div>
        <van-form @submit="onSubmit">

            <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />


           <div class="registerText">
               <router-link to="/register">立即注册</router-link>
           </div>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="login">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import {loginApi} from "../../../api/user-api"
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',

            };
        },
        methods: {
            onSubmit(values) {
                // console.log('submit', values);
            },
            login(){
                loginApi(this.username,this.password).then(res => {
                    // console.log(res)
                    if (res.code== 0) {
                       this.$toast('登陆成功');
                        // console.log(res.data)
                        this.$router.push({path:"/my"})
                        this.$store.commit("changelogin",
                            {islogin: true, loginName: res.data.loginName,userName: res.data.userName,phonenumber: res.data.phonenumber,avatar:res.data.avatar})
                    }else {
                        this.$toast('用户名或密码输入错误');
                    }
                })
            }
        },
    }
</script>

<style scoped lang="less">
.logo{
    width: 100%;
    height: 260px;
    text-align: center;
}
    .registerText{
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        margin-left: 20px;
    }
</style>